import { useEffect, useState } from 'react';
import styles from './tag.less';
import { tag_item } from '@/utils/tag';
import { useDispatch, useSelector , useHistory} from 'umi';

const tag: React.FC = (props, {hist}) => {
    //传过来的值
    console.log(history.state.state);
    
    let History = useHistory();

    const [CarInd, setCarInd] = useState(0)
    const Tab = [ 'Git' , 'Docker' , '阅读' ,'nginx' ,'JS' ,'TS' ,'bash' ,'CSS' ,'LeetCode']

    const dispatch = useDispatch()
    const state = useSelector((state : { tag:any }) => state.tag)

    useEffect(() => {
        dispatch({
            type : 'tag/GetSum',

            payload : {
                data : Tab
            }
            
        })
    }, [])

    useEffect(() => {
        dispatch({
            type : 'tag/getTagData',
            payload : {
                data : Tab[CarInd]
            }
        })
    }, [CarInd])

    return <div className={styles.tag_wrap}>
        <div className={`${styles.main} ${styles.left}`}>

            {/* 头部显示 */}
            <div className={`${styles.left_Header} ${styles.main_border}`}>
                <p>
                    与 <span>{ Tab[CarInd] }</span> 标签有关的文章
                </p>

                <p>
                    共搜索到 <span>{state.tagArr.length}</span> 篇
                </p>
            </div>

            {/* tab切换 */}
            <div className={`${styles.tab} ${styles.main_border}`}>
                <h5>
                    文章标签
                </h5>

                <div className={styles.tab_Box}>
                    {
                        Tab.map((item , index)=>{
                            return <span key={index}
                                    onClick={()=>{
                                        state.tagSum[index]
                                        ?setCarInd(index)
                                        : console.log('无数据');
                                        
                                    }}
                                    className={`${
                                        CarInd == index
                                        ?styles.Tab_Active
                                        :''
                                    }`}

                                >{item} [{state.tagSum[index]}]</span>
                        })
                    }
                </div>
            </div>

            <div className={`${styles.left_main} ${styles.main_border}`}>
                {
                    state.tagArr.map((item:tag_item,index:number)=>{
                        return <div key={index} className={styles.main_item} onClick={()=>{
                            History.push(`/page/readDetail` , item.id)
                        }}>
                            <p>
                                {item.title}
                            </p>
                            <div className={styles.item_Detail}>
                                <img src={item.cover} alt="" />
                                <div>
                                    <p>
                                        {item.summary}
                                    </p>
                                    <h4>
                                        喜欢:{item.likes}
                                        观看:{item.views}
                                        分享
                                    </h4>
                                </div>
                            </div>
                        </div>
                    })
                }
            </div>
        </div>

        <div className={`${styles.main} ${styles.right}`}>
            右
        </div>
    </div>
}

export default tag